<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Keyboard Test | TM Lib</title>
        
        <style>
            body { font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif; }
            
            #content {
                display: -webkit-box;
                display: -moz-box;
                display: -o-box;
                display: box;
            }
            
            #content>* {
                padding: 10px 20px;
                width: 50%;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
            }
            
            table {
                width: 100%;
            }
            th {
                width: 100px;
            }
            td {
                width: 200px;
            }
            
            td[html="true"] {
                color:red;
            }
            
            
        </style>
        
        <script type="text/javascript" src="./../../src/tmlib.js"></script>
        <script id="test-script">
            
            TM.loadScript("input", "keyboard");
            
            /*
             * Test
             */
            TM.main(function()
            {
                // keyboard 生成
                var k = TM.$Key(document);
                
                var keyValueList = TM.$classAll("key-value");
                var keyDownValueList = TM.$classAll("key-down-value");
                var keyUpValueList = TM.$classAll("key-up-value");
                
                TM.setLoop(function(){
                    // keyboard 情報更新
                    k.update();
                    
                    for (var i=0,len=keyValueList.length;i<len; ++i) {
                        var keyName = keyValueList[i].getAttribute("data");
                        keyValueList[i].innerHTML = k.getKey(keyName);
                    }
                    
                    for (var i=0,len=keyDownValueList.length;i<len; ++i) {
                        var keyName = keyDownValueList[i].getAttribute("data");
                        keyDownValueList[i].innerHTML = k.getKeyDown(keyName);
                    }
                    
                    for (var i=0,len=keyUpValueList.length;i<len; ++i) {
                        var keyName = keyUpValueList[i].getAttribute("data");
                        keyUpValueList[i].innerHTML = k.getKeyUp(keyName);
                    }
                    
                    // angle
                    TM.$id("angle-value").innerHTML = k.getKeyAngle();
                    
                }, 1000/30);
            });
            
        </script>
        
        <script>
            TM.addNamespace("prettify", "./../../plugins/prettify");
            TM.loadPrettify();
            
            TM.main(function(){
                TM.$id("code").innerText = TM.$id("test-script").innerText;
                prettyPrint();
            });
        </script>
    </head>
    
    <body>
         
        <h1>Keyboard Test | TM Lib</h1>
        
        <div id="content">
            <section>
                <h2>Plot</h2>
                <table border=1>
                    <tr>
                        <th></th>
                        <th>key</th>
                        <th>key down</th>
                        <th>key up</th>
                    </tr>
                    <tr>
                        <th>a</th>
                        <td class="key-value" data="a"></td>
                        <td class="key-down-value" data="a"></td>
                        <td class="key-up-value" data="a"></td>
                    </tr>
                    <tr>
                        <th>b</th>
                        <td class="key-value" data="b"></td>
                        <td class="key-down-value" data="b"></td>
                        <td class="key-up-value" data="b"></td>
                    </tr>
                    <tr>
                        <th>c</th>
                        <td class="key-value" data="c"></td>
                        <td class="key-down-value" data="c"></td>
                        <td class="key-up-value" data="c"></td>
                    </tr>
                    <tr>
                        <th>z</th>
                        <td class="key-value" data="z"></td>
                        <td class="key-down-value" data="z"></td>
                        <td class="key-up-value" data="z"></td>
                    </tr>
                    <tr>
                        <th>x</th>
                        <td class="key-value" data="x"></td>
                        <td class="key-down-value" data="x"></td>
                        <td class="key-up-value" data="x"></td>
                    </tr>
                    <tr>
                        <th>space</th>
                        <td class="key-value" data="space"></td>
                        <td class="key-down-value" data="space"></td>
                        <td class="key-up-value" data="space"></td>
                    </tr>
                    <tr>
                        <th>enter</th>
                        <td class="key-value" data="enter"></td>
                        <td class="key-down-value" data="enter"></td>
                        <td class="key-up-value" data="enter"></td>
                    </tr>
                    <tr>
                        <th>shift</th>
                        <td class="key-value" data="shift"></td>
                        <td class="key-down-value" data="shift"></td>
                        <td class="key-up-value" data="shift"></td>
                    </tr>
                    <tr>
                        <th>ctrl</th>
                        <td class="key-value" data="ctrl"></td>
                        <td class="key-down-value" data="ctrl"></td>
                        <td class="key-up-value" data="ctrl"></td>
                    </tr>
                    <tr>
                        <th>alt</th>
                        <td class="key-value" data="alt"></td>
                        <td class="key-down-value" data="alt"></td>
                        <td class="key-up-value" data="alt"></td>
                    </tr>
                    <tr>
                        <th>left</th>
                        <td class="key-value" data="left"></td>
                        <td class="key-down-value" data="left"></td>
                        <td class="key-up-value" data="left"></td>
                    </tr>
                    <tr>
                        <th>up</th>
                        <td class="key-value" data="up"></td>
                        <td class="key-down-value" data="up"></td>
                        <td class="key-up-value" data="up"></td>
                    </tr>
                    <tr>
                        <th>right</th>
                        <td class="key-value" data="right"></td>
                        <td class="key-down-value" data="right"></td>
                        <td class="key-up-value" data="right"></td>
                    </tr>
                    <tr>
                        <th>down</th>
                        <td class="key-value" data="down"></td>
                        <td class="key-down-value" data="down"></td>
                        <td class="key-up-value" data="down"></td>
                    </tr>
                    <tr>
                        <th>angle</th>
                        <td colspan="3" id="angle-value"></td>
                    </tr>
                </table>
            </section>
            <section>
                <h2>Code</h2>
                <pre id="code" class="prettyprint"></pre>
            </section>
        </div>
        
        
    </body>
</html>
